<template>
  <div class="container page">
    <div  :key="index" v-for="(groupk, index) in group" class="list" @click="groupClick(groupk.group_id, groupk.group_name)">
      <div class="left-p">{{ groupk.group_name }}<br><span>的股友圈</span></div>
      <div class="right-p">
        <progress class="progress" :percent="groupk.test/groupk.test_all*100" color="#59c5e3" border-radius="10" stroke-width="8" active />
        <div class="line2">
          <p style="color: rgb(62, 207, 221);">已测: {{ groupk.test }}</p>
          <p style="color: rgb(44, 152, 159);">剩余: {{ groupk.test_all - groupk.test }}</p>
        </div>
      </div>
    </div>

    <!-- <button open-type="share">+ 新建圈子</button> -->
    <button open-type="share" class="btn-p" style="margin: 80rpx 150rpx;">+ 新建圈子</button>

  </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
    YearProgress
  },
  data () {
    return {
      group: [],
      playerRank: []
    }
  },
  mounted () {

    // this.bookid = this.$root.$mp.query.id

    // this.demo().then(result => {
    // console.log('demo', result.data);
    // });
    
    // this.joke().then(result => {
    // console.log('joke', result.data.data.msg);
    // });

    // this.player().then(result => {
    //   this.playerRank = result
    //   console.log('joke', result);
    // });

  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你加入他的股友圈`,
      path: `/pages/me/main?openid_create=${wx.getStorageSync('userinfo').openId}&sharepath=predict`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share_chat.png'
    }
  },
  methods: {
    // 查询群列表
    async groupList(a, b) {
      let openid = wx.getStorageSync('userinfo').openId
      return await post2('list_group', {'openid': openid})
    },
    groupClick(groupid, groupname) {
      wx.navigateTo({
        url: `/pages/group/main?groupid=${groupid}&groupname=${groupname}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
      this.userinfo = res
    }

  },
  onShow () {
    this.userinfo = wx.getStorageSync('userinfo')

    this.groupList().then(result => {
      // console.log('222222222', result.group);
      this.group = result.group
    });
    // console.log(123)
    // let userinfo = wx.getStorageSync('userinfo')
    // console.log([userinfo])
    // if (userinfo) {
    //   this.userinfo = userinfo
    // }
    // console.log(this.userinfo)
  }
}
</script>

<style lang='scss'>
.container{
  font-size: 30rpx;
  color: white;
  // background-color: #070d1b;
  // width: 100%;
  // line-height: 100%;
  // opacity: 0.7;
}
page {
  background-color: #090f1d;
  // background-color: #070d1b;
  // background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/common/bg@3x.png");
  width: 100%;
  height: 100%;
}
.list {
  margin: 30rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/predict/cb_bg@3x.png");
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  align-items: center;
  padding: 0 50rpx;
  .right-p {
    flex: 4;
    .progress {
      height: 50rpx;
      line-height: 50rpx;
      padding-top:45rpx;
    }
    .line2 {
      display: flex;
      align-items: center;
      height: 50;
      line-height: 50rpx;
      p {
        flex:1;
      }
    }
  }
  .left-p {
    color: rgb(208, 227, 238);
    flex: 2
  }
}
.btn-p {
  // color: #070d1b;
  color: rgb(208, 227, 238);
  background-color: rgb(45, 161, 187);
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/predict/cb_bg_bt2@3x.png");
  height: 80rpx;
  line-height: 80rpx;
  // width: 75%;
  // margin: 0 80rpx;
  margin-top: 150rpx;
  text-align: center;
  // opacity: 1;
}
</style>
